<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" 
                    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="../文件/vue.js"></script>
    <script src="../第8天/mock.js"></script>
    <title>就诊人管理</title>
</head>
<body>
    <div id="app">
        <!-- 导航栏区域 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <a class="navbar-brand" href="#">东方医院</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- 首页 -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">   
                <li class="nav-item mx-3">
                    <a class="nav-link active" aria-current="page" href="#">首页</a>
                </li>
            <!-- 医院概况 -->
                <li class="nav-item dropdown mx-3">
                    <a id="my-dropdown" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">医院概况</a>
                    <div class="dropdown-menu" aria-labelledby="my-dropdown">
                        <a class="dropdown-item " href="#">医院介绍</a>
                        <a class="dropdown-item " href="#">组织架构</a>
                        <a class="dropdown-item " href="#">医院历史</a>
                    </div>
                </li>
            <!-- 医疗服务 -->
                <li class="nav-item dropdown mx-3">
                    <a id="my-dropdown" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">医疗服务</a>
                    <div class="dropdown-menu" aria-labelledby="my-dropdown">
                        <a class="dropdown-item " href="#">医院介绍</a>
                        <a class="dropdown-item " href="#">组织架构</a>
                        <a class="dropdown-item " href="#">医院历史</a>
                    </div>
                </li>
            <!-- 科室导航 -->
                <li class="nav-item mx-3">
                    <a class="nav-link" href="#">科室导航</a>
                </li>
            <!-- 学术交流 -->
                <li class="nav-item mx-3">
                    <a class="nav-link" href="#">学术交流</a>
                </li>
                </ul>
            <!-- 搜索框 -->
                <form class="form-inline mx-3" method="get" action="">
                    <input class="form-control mr-sm-2" type="search" placeholder="搜索科室，医生" aria-label="Search">
                    <button class="btn btn-success my-2 my-sm-0" type="submit">搜索</button>
                </form>
            </div>
        </nav>

        <!-- 巨型屏幕区域 -->
        <div class="jumbotron jumbotron-fluid pb-0 pt-5">
            <div class="container pl-0">
                <h1 class="display-4">就诊人管理</h1>
                <p class="lead">东方医院</p>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="./page.html">科室导航</a></li>
                    <li class="breadcrumb-item"><a href="#">门诊排班</a></li>
                    <li class="breadcrumb-item active" aria-current="page">就诊人管理</a></li>
                    <li class="breadcrumb-item"><a href="#">预约挂号</a></li>
                </ol>
                </nav>
        </div>

        <!-- 就诊信息 -->
        <div class="tabl mx-5">
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModalScrollable">
                新增就诊人
              </button>
              
              <!-- Modal -->
              <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-scrollable" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalScrollableTitle">新增就诊人信息</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                        <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">姓名</span>
                        </div>
                        <input id="input-name" v-model="newpeople.name" type="text" class="form-control" placeholder="name" aria-label="Username" aria-describedby="basic-addon1">
                        </div>
                        <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">身份证号</span>
                        </div>
                        <input id="input-id" v-model="newpeople.id" type="number" class="form-control" placeholder="id" aria-label="Userid" aria-describedby="basic-addon1">
                        </div>
                        <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">手机号</span>
                        </div>
                        <input id="input-phone" v-model="newpeople.phone" type="number" class="form-control" placeholder="phone" aria-label="Userphone" aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                      <button type="button" class="btn btn-primary" @click="saveAdd()" data-dismiss="modal">保存</button>
                    </div>
                  </div>
                </div>
              </div>

        <!-- 就诊人表格 -->
            <div class="table2 mx-5">
            <table class="table table-striped mx-5 my-3">
                <thead>
                <tr>
                    <th scope="col">姓名</th>
                    <th scope="col">身份证号</th>
                    <th scope="col">手机号</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in (people.slice((toPage-1)*pageNum,toPage*pageNum))" :key="item.id">
                    <th scope="row">{{item.name}}</th>
                    <td>{{item.id}}</td>
                    <td>{{item.phone}}</td>
                    <td>
                        <button type="button" class="btn btn-outline-warning" style="width: 90px;" data-toggle="modal" data-target="#changeModal" @click="showUser(index)">编辑</button>  
                        <button type="button" class="btn btn-outline-danger" style="width: 90px;" @click="deleteItem(index)">删除</button>              
                        <!-- Modal -->
                        <div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalScrollableTitle">编辑就诊人信息</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">&times;</span>
                                    </button>
                                  </div>
                                  <div class="modal-body">
                                    <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1">姓名</span>
                                    </div>
                                    <input id="input-name" v-model="changename" type="text" class="form-control" placeholder="name" aria-label="Username" aria-describedby="basic-addon1">
                                    </div>
                                    <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1">身份证号</span>
                                    </div>
                                    <input id="input-id" v-model="changeid" type="number" class="form-control" placeholder="id" aria-label="Userid" aria-describedby="basic-addon1">
                                    </div>
                                    <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1">手机号</span>
                                    </div>
                                    <input id="input-phone" v-model="changephone" type="number" class="form-control" placeholder="phone" aria-label="Userphone" aria-describedby="basic-addon1">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" data-dismiss="modal" @click="saveChange()">保存</button>
                                </div>
                            </div>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <nav aria-label="Page navigation example">
                <ul class="pagination" @click="test($event)">
                  <li class="page-item"><a class="page-link" href="#"><</a></li>
                  <li class="page-item" v-for="item in total"><a class="page-link" href="#">{{item}}</a></li>
                  <li class="page-item"><a class="page-link" href="#">></a></li>
                </ul>
            </nav>
            </div>
  
        </div>

        <!--页面页脚-->
        <div class="jumbotron text-center mt-5 mb-0">
            <h1 class="display-4">csuft</h1>
            <p class="lead">中南林业科技大学</p>
        </div>
    </div>


    <script>
        let v1 = new Vue({
            el: '#app',
            data(){
                return{
                    //定义用户数组
                    people:[],
                    //定义新增就诊人数组
                    newpeople:{},
                    //储存修改用户数据
                    testpeople:{},
                    changename:'',
                    changeid:'',
                    changephone:'',
                    indexx:'',

                    //定义页数
                    pageNum:5,
                    //当前页数
                    toPage:1,
                };
            },
            computed:{
                //定义页数按钮数量
                total:{
                    get:function(){
                        let totalNum=this.people.length;
                        let page = Math.ceil(totalNum/this.pageNum);//向上取整
                        return page
                    }
                },
            },
            methods:{
                test(e){       //点击加减页数
                    let str = e.path[0].innerText;
                    //console.log(str.charCodeAt());
                    if (str.charCodeAt() == 60) {
                        if (this.toPage > 1) {
                            this.toPage--;
                        }
                    } else if (str.charCodeAt() == 62) {
                        if (this.toPage < this.total) {
                            this.toPage++;
                        }
                    }else{
                        this.toPage = Number(str);
                    }
                    //console.log(this.toPage);
                },
                deleteItem: function (index) {   //删除就诊人信息
                    this.people.splice((this.toPage-1)*this.pageNum+index,1) 
                    //console.log((this.toPage-1)*this.pageNum+index)  //通过下标删除
                },
                saveAdd:function(){      //新增就诊人的保存按钮
                    this.people.push(this.newpeople);
                    this.newpeople=[];
                },
                showUser:function(index){    //编辑就诊人信息（显示原有信息）
                    let changeNum = (this.toPage-1)*this.pageNum+index;
                    console.log(changeNum);
                    this.changename=this.people[changeNum].name;
                    this.changeid=this.people[changeNum].id;
                    this.changephone=this.people[changeNum].phone;
                    this.indexx=changeNum;
                },
                saveChange:function(){     //编辑就诊人的保存按钮
                    this.people[this.indexx].name=this.changename;
                    this.people[this.indexx].id=this.changeid;
                    this.people[this.indexx].phone=this.changephone;
                },
            },
            mounted() {
                //随机生成数据
                let userArr = [];                   
                for(let i=0;i<13;i++){
                    let userInfo = {};
                    userInfo.name = Mock.Random.cname();
                    userInfo.id = Mock.Random.id();
                    userInfo.phone = Mock.Random.string('number',11);
                    userArr.push(userInfo)
                };  
                this.people = userArr;
            },
        });
    </script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>